<!--
***图文详情***
-->
<template>
  <div v-if="imgTextData">
    <v-header v-if="!$root.ISAPP">
      <div class="nav-tab2">
        <h3>{{imgTextData.titel}}</h3>
      </div>
    </v-header>
    <div class="detail vhtml" v-html="imgTextData.particulars"></div>
    <div class="product" v-web-app='appopt'>
      <div class="img"><img :src="imgTextData.product.mainpic | https" alt=""></div>
      <div class="text">
        <p class="price font-price">¥{{imgTextData.product.currentprice||imgTextData.product.originalprice}}</p>
        <p class='del font-price' style='font-size:11px;color:rgb(153,153,153);' v-if='imgTextData.product.currentprice'>¥ {{imgTextData.product.originalprice}}</p>
        
        <p class="name ellipsis">{{imgTextData.product.brandname}}</p>
        <p class="brand">{{imgTextData.product.productname}}</p>
      </div>
      <div class="tag" v-if="parentId">查看商品详情</div>
      <div class="tag" v-if="!parentId">佣金 <span>¥{{imgTextData.product.sharepic}}</span></div>
    </div>
    <template v-if="imgTextData.recommendedimagetext&&!parentId">
      <h1 class="title"> 推荐图文</h1>
      <swiper :options="headSwiperOption" class="headSwiper">
        <swiper-slide v-for="item in imgTextData.recommendedimagetext" :key='item.id' :style='css.borderShadow'>
          <div class="head-item" @click="goDistributionDetailed(item)">
            <img :src="item.textpictureurl | https" alt="" style="filter:brightness(0.9);">
            <p class="head-item-price" @click.stop="shareFn(item)"><em></em>分享可得 <span>¥{{item.sharepic}}</span></p>
            <div class="bottom">
              <div class="likeBtn" :class="{active: item.islike}"></div>
              <p class="head-item-title ellipsis">{{item.title}}</p>
              <div class="head-item-num">
                <span class="head-item-like">{{item.likenum}}</span>
                <span class="head-item-news">{{item.commentnum}}</span>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </template>
    <div class="comment">
      <h1 class="title"> 热门评论
        <span class="comment-bottom" @click="switchReview">写评论</span>
      </h1>
      <div class="commentEmpty" v-if="!commentData || commentData.length === 0">
        <img src="/static/img/d_comment_empty.png" alt="">
        还没有评论哦~
      </div>
      <template v-if="commentData&&commentData.total">
        <div class="comment-item" v-for="(item,index) in commentData.allComment" :key="index">
          <div class="comment-info">
            <img :src="item.userphoto | https" class="comment-headImg">
            <span class="comment-name">{{item.username}}</span>
            <span class="comment-like" :class="{ 'like': item.islike }" @click="commentLike(item)">{{item.likecount}}</span>
          </div>
          <div class="comment-body">
            <p class="comment-text">{{item.comment}}</p>
            <p class="comment-time">{{item.replytime}}</p>
            <div class="comment-reply" v-if="item.commentreply.length > 0">
              <template v-for="reply in item.commentreply">
                <div class="comment-info">
                  <img :src="reply.userphoto | https" class="comment-reply-headImg">
                  <span class="comment-reply-name" >{{reply.name}}</span>
                </div>
                <div class="comment-reply-text">{{reply.commentreply}}</div>
                <p class="comment-reply-time">{{reply.replytime}}</p>
              </template>
            </div>
          </div>
        </div>
        <router-link :to="{ name: 'distributionComment', params: { id: $route.params.id } }" class="comment-more">查看更多</router-link>
      </template>
    </div>
    <div class="writeReview" v-show="showWriteReview" @click="switchReview">
      <div class="reviewContent" @click.stop>
        <textarea type="text" v-model.trim="reviewText" placeholder="热门评论将会被优先展示哦" class="reviewInput" maxlength="72">
        </textarea>
        <input type="checkbox" v-model="anonymous" id="anonymous">
        <label for="anonymous" class="anonymous">匿名</label>
        <span class="submitReview" :class="{black: reviewText}" @click="save">评论</span>
      </div>
    </div>
    <div class="footer" v-show="!showWriteReview">
      <span class="footer-like" @click="getLike" :class="{ 'like': imgTextData.islike }"><em></em>{{imgTextData.likecount}}</span>
      <span class="footer-comment" v-if="commentData" @click="switchReview"><em></em>{{commentData.total}}</span>
      <span class="footer-comment" v-if="!commentData"><em></em>0</span>
      <div class="footer-buttom">
        <template v-if="!parentId">
          <div class="footer-buy" @click="itemsOpen">
            <p class="footer-des">我要购买</p>
            <p class="footer-money">省¥{{imgTextData.product.sharepic}}</p>
          </div>
          <div class="footer-share" @click="shareFn">
            <p class="footer-des">分享赚佣金</p>
            <p class="footer-money">返¥{{imgTextData.product.sharepic}}</p>
          </div>
        </template>
        <div v-else class="footer-share" @click="itemsOpen">
            <p class="footer-des">一键购买</p>
        </div>
      </div>
    </div>
    <product-items :show="css.showItems" :isDistribution="false" :product-info="productInfo" :isGroupBuy="false" @close='itemsClose'></product-items>
    <div class="shareTips" v-if="isTips">
      <img src="/static/img/d_tips.png" class="tips" alt="">
      <img src="/static/img/d_ok.png" @click="okFn" class="btn" alt="">
    </div>
  </div>
</template>

<script>
import { getUrlParam, DateDiffFormat } from '@/common/util'
import { imgTextDetail, imgTextDetailOpen, like, comment, saveComment, commentLike, saveShare } from '../../common/api/distribution'
import ProductItems from '../../common/templates/mall/ProductItems'
import { NewDetail } from '../../common/api/product'
export default {
  data() {
    return {
      headSwiperOption: {
        slidesPerView: 'auto',
        spaceBetween: 15,
        slidesOffsetBefore: 20,
        slidesOffsetAfter: 20
      },
      headSwiperData: [],
      css: {
        borderShadow: {
          borderRadius: '8px',
          overflow: 'hidden',
          boxShadow: '0 3px 7px 0px rgba(0,0,0,0.1)',
          background: '#ffffff',
          position: 'relative',
          fontSize: '0',
          width: 'auto'
        },
        showItems: false
      },
      commentData: null,
      reviewText: null,
      showWriteReview: false,
      imgTextData: null,
      appopt: null,
      anonymous: false,
      isShare: false,
      parentId: null,
      currentDistributionId: null,
      isTips: false,
      productInfo: {},
      imgs: [],
      sizeList: {},
      share: {
        'desc': '',
        'title': '',
        'link': '',
        'imgUrl': ''
      }
    }
  },
  components: { ProductItems },
  created() {
    this.currentDistributionId = this.getCurrentUser().distributionId
    this.parentId = this.$route.query.parentid || null
    if(this.parentId){
      this.parentId = this.parentId.replace('?pagetype=1','')
    }
    console.log('parentId 父分销商ID: ', this.parentId)
    console.log('当前分销商ID: ', this.currentDistributionId)
    this.getContent()
    this.getComments()
  },
  methods: {
    switchReview() {
      if (!this.currentUser.token) {
        this.$router.push(`/login`)
      } else {
        this.showWriteReview = !this.showWriteReview
      }
    },
    itemsClose(item) {
      this.css.showItems = false
      if (item) {
        this.buyNow(item)
      }
    },
    itemsOpen() {
      if (!this.currentUser.token) {
        this.$router.push(`/login`)
        return
      }
      this.css.showItems = true
    },
    getDetail(id) {
      NewDetail(id)
        .then(res => {
          this.productInfo = res.info
          this.productInfo.productid = res.info.id
          this.imgs = (res.info.mainpic || '').split('|')
          this.sizeList = JSON.parse(res.info.sizedesc || '{}')
        })
        .catch(e => {
          console.error('Ajax error:', e)
        })
    },
    buyNow(item) {
      if (this.parentId) {
        item.distributionid = this.parentId
        item.prostatus = 0
      } else {
        item.distributionid = this.currentDistributionId
        item.prostatus = 0
      }
      item.salemoney = item.saleprice
      item.saleprice = item.price
      item.specialprice = item.price
      item.checked = true
      item.isok = true

      let tempTotalPrice = item.count * item.price
      let pay = {
        ...item,
        id: item.productid,
        allPay: tempTotalPrice,
        item: [item]
      }

      let _ = this
      _.$store.dispatch('setOrderCoupon', {
        canUseCoupon: [],
        unCanUseCoupon: []
      })
      _.$store.state.order.selectedCoupon = {}
      _.$store.dispatch('setOrderOut', { ...pay })
      _.$store.dispatch('setFromeType', 1)
      _.$router.push('/order/checkout')
    },
    goDistributionDetailed(item) {
      console.log('click item: ', item)
      if (this.$root.ISAPP) {
        this.javascriptBridge({
          name: 'gotoAppWebview',
          params: {
            distributionId: this.currentDistributionId,
            url: `${window.document.location.protocol}//${window.document.location.host}/distribution/detailed/${item.id}`
          }
        })
      } else {
        let routePath = '/distribution/detailed/'
        let paramId = item.id
        this.$router.push(routePath + paramId)
      }
    },
    getContent() {
      let opt = {
        imagetextid: this.$route.params.id,
        parentid: this.parentId
      }

      imgTextDetailOpen(opt).then(res => {
        this.imgTextData = res
        this.getDetail(res.product.productid)
        this.initShare()
        this.share.desc = res.shareinfo.content
        this.share.title = res.shareinfo.title
        this.share.link = res.shareinfo.url
        this.share.imgUrl = res.shareinfo.icon

        setTimeout(function(){
          //利用iframe的onload事件刷新页面 
          window.document.title = res.titel; 
          var iframe = document.createElement('iframe');
          iframe.style.visibility = 'hidden'; 
          iframe.style.width = '1px'; 
          iframe.style.height = '1px'; 
          iframe.onload = function () { 
              setTimeout(function () {
                  document.body.removeChild(iframe); 
              }, 0); 
          }; 
          document.body.appendChild(iframe);
        } ,0);
        let webId = ''
        if (this.parentId) {
          webId = `${res.product.productid}?parentId=${this.parentId}`
        } else {
          webId = `${res.product.productid}?parentId=${this.currentDistributionId}&commission=${res.product.sharepic || 0}`
        }

        this.appopt = {
          urlExist: true,
          urltype: {
            appUrl: {
              name: 'gotoAppRetailProductDetailPage',
              params: {
                productid: res.product.productid,
                commission: '¥' + res.product.sharepic || 0,
                distributionId: this.parentId || this.currentDistributionId,
                sharetitle: res.shareinfo.title,
                sharecontent: res.shareinfo.content,
                sharepicurl: res.shareinfo.icon,
                shareurl: res.shareinfo.url,
                xcxurl: res.shareinfo.scene,
                imagetextid: this.$route.params.id
              }
            },
            webUrl: {
              name: '/productDetail/',
              params: {
                id: webId
              }
            }
          }
        }

        if (this.currentUser.token) {
          imgTextDetail(opt)
            .then(res => {
              this.imgTextData = res
              this.share.link = res.shareinfo.url
              this.initShare({
                info:{
                  title:res.shareinfo.title,
                  desc:res.shareinfo.content,
                  img:res.shareinfo.icon,
                  url:res.shareinfo.url
                }
              })

              console.log('recommendedimagetext: ', this.imgTextData.recommendedimagetext)

              let webId = ''
              if (this.parentId) {
                webId = `${res.product.productid}?parentId=${this.parentId}`
              } else {
                webId = `${res.product.productid}?parentId=${this.currentDistributionId}&commission=${res.product.sharepic || 0}`
              }

              this.appopt.urltype.appUrl.params.commission = '¥' + res.product.sharepic || 0
              this.appopt.urltype.appUrl.params.shareurl = res.shareinfo.url
              this.appopt.urltype.webUrl.params.id = webId
              window.distributionShareSUccess = ()=>{
                saveShare({imagetextid: res.imagetextid})
              }
              if (this.$root.ISAPP) {
                let opt = {
                  name: 'getAppActivityShareContent',
                  params: {
                    sharetitle: res.shareinfo.title,
                    sharecontent: res.shareinfo.content,
                    sharepicurl: res.shareinfo.icon,
                    shareurl: res.shareinfo.url,
                    xcxurl: res.shareinfo.scene,
                    callbackname: 'distributionShareSUccess'
                  }
                }
                this.javascriptBridge(opt)
              }
            })
            .catch(e => {
              console.error('Ajax error:', e)
            })
        } else {

        }
      }).catch(e => {
        console.error('Ajax error:', e)
      })
    },
    getLike() {
      if (!JSON.parse(window.localStorage.getItem('currentUser') || '{}').token) {
        this.$router.push(`/login`)
        return
      }
      if (this.imgTextData.islike) {
        let opt = {
          imagetextid: this.$route.params.id,
          islike: 0
        }
        like(opt)
          .then(res => {
            if (res) {
              this.imgTextData.islike = 0
              this.imgTextData.likecount--
            }
          })
      } else {
        let opt = {
          imagetextid: this.$route.params.id,
          islike: 1
        }
        like(opt)
          .then(res => {
            if (res) {
              this.imgTextData.islike = 1
              this.imgTextData.likecount++
            }
          })
      }
    },
    getComments() {
      let opt = {
        size: 3,
        page: 1,
        imagetextid: this.$route.params.id
      }
      comment(opt)
        .then(res => {
          if (res) {
            res.allComment = res.allComment.map(item=>{
              item.replytime = DateDiffFormat(item.replytime)
              item.commentreply = item.commentreply.map(reply=>{
                reply.replytime = DateDiffFormat(reply.replytime)
                return reply
              })
              return item
            })
            this.commentData = res
          }
        })
    },
    save() {
      let opt = {
        replycomment: this.reviewText,
        imagetextid: this.$route.params.id,
        isanonymity: Number(this.anonymous)
      }
      saveComment(opt)
        .then(res => {
          if (res) {
            this.showWriteReview = false
            this.reviewText = ''
            this.toast('发表成功')
            this.getComments()
          }
        })
    },
    commentLike(item) {
      if (!JSON.parse(window.localStorage.getItem('currentUser') || '{}').token) {
        this.$router.push(`/login`)
        return
      }
      if (item.islike) {
        let opt = {
          commentid: item.id,
          islike: 0
        }
        commentLike(opt)
          .then(res => {
            if (res) {
              item.islike = 0
              item.likecount--
            }
          })
      } else {
        let opt = {
          commentid: item.id,
          islike: 1
        }
        commentLike(opt)
          .then(res => {
            if (res) {
              item.islike = 1
              item.likecount++
            }
          })
      }
    },
    shareFn(item) {
      if (!JSON.parse(window.localStorage.getItem('currentUser') || '{}').token) {
        this.$router.push(`/login`)
        return
      }
      let params = {
        imagetextid: this.$route.params.id
      }
      if (item && item.id) {
        console.log('item: ', item)
        params.imagetextid = item.id
      }
      if (this.$root.ISAPP) {
        let opt = {
          name: 'callAppShareDialog',
          params: {
            sharetitle: this.imgTextData.shareinfo.title,
            sharecontent: this.imgTextData.shareinfo.content,
            sharepicurl: this.imgTextData.shareinfo.icon,
            shareurl: this.imgTextData.shareinfo.url,
            xcxurl: this.imgTextData.shareinfo.scene,
            callbackname: 'distributionShareSUccess'
          }
        }
        window.distributionShareSUccess = ()=>{
            saveShare({imagetextid: this.imgTextData.imagetextid})
        }
        if (item && item.id) {
          opt.params.sharetitle = item.shareinfo.title
          opt.params.sharecontent = item.shareinfo.content
          opt.params.sharepicurl = item.shareinfo.icon
          opt.params.shareurl = item.shareinfo.url
          opt.params.xcxurl = item.shareinfo.scene
          window.distributionShareSUccess = ()=>{
            saveShare({imagetextid: item.imagetextid})
          }
        }
        this.javascriptBridge(opt)
      } else if (this.$root.ISWX&&!(item && item.id)) {
          saveShare({imagetextid: this.imgTextData.imagetextid})
          this.isTips = true
      } else {
          this.loadApp()
      }
    },
    okFn() {
      this.isTips = false
    }
  }
}
</script>

<style lang='scss' scoped>
.detail{
  padding: 2vw 5vw 5vw;
  font-size: 14px;
}
.title {
  margin-left: 20px;
  margin-right: 20px;
  font-size: 18px;
  color: rgb(51, 51, 51);
  margin-bottom: 20px;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-left: 2px solid #000;
  padding-left: 10px;
  height: 18px;
  line-height: 18px;
}
.headSwiper {
  padding-bottom: 10vw;
}
.head-item {
  position: relative;
  height: 48vw;
  width: 85.33vw;
  img{
    height: 48vw;
    width: 85.33vw;
  }
  .bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 13.33vw;
    background: #fff;
    padding: 0 4vw;
    text-align: left;
    padding-top: 1vw;
    .likeBtn{
      position: absolute;
      width: 20px;
      height: 17px;
      background: url(/static/img/d_like1.png);
      background-size: 20px 17px;
      top: 1.5vw;
      right: 4vw;
      &.keep{
        background: url(/static/img/d_like2.png);
        background-size: 20px 17px;
      }
    }
  }
}

.head-item-price {
  height: 6.4vw;
  font-size: 12px;
  color: #333;
  background-color: #fff;
  border-radius: 6.4vw 0 0 6.4vw;
  padding: 0 4.8vw;
  width: auto;
  position: absolute;
  bottom: 17.1vw;
  right: 0;
  line-height: 6.4vw;
  span{
    color: #ffce00;
    font-family: BASE_PRICE;
    font-size: 16px;
  }
  em{
    float: left;
    background: url(/static/img/d_share.png);
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
    margin-top: 1.5vw;
    margin-right: 4px;
  }
}
.head-item-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  line-height: 22px;
  margin-bottom: 4px;
  width: 65vw;
}
.head-item-num {
  font-size: 12px;
  color: #333;
}
.head-item-like {
  margin-right: 4vw;
  float: left;
  &::before{
    content: '';
    background: url(/static/img/d_like.png);
    float: left;
    width: 12px;
    height: 13px;
    background-size: 12px 13px;
    margin-right: 4px;
  }
}
.head-item-news{
  float: left;
  &::before{
    content: '';
    background: url(/static/img/d_comment.png);
    float: left;
    width: 13px;
    height: 13px;
    background-size: 13px 13px;
    margin-right: 4px;
  }
}
.comment{
  padding-bottom: 65px;
  .commentEmpty{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding-top: 10vw;
    img{
      width: 52vw;
      margin-bottom: 10vw;
    }
  }
}
.comment-more{
  font-size: 12px;
  display: block;
  margin: 0 auto;
  width: 20vw;
  &::after{
    content: '';
    background: url(/static/img/d_more.png);
    display: inline-block;
    background-size: 14px 14px;
    width: 14px;
    height: 14px;
    position: relative;
    top: 2px;
  }
}
.comment-bottom {
  font-size: 12px;
  &::before{
    content: '';
    background: url(/static/img/d_write.png);
    float: left;
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
    margin-right: 4px;
  }
}
.comment-item {
  margin-bottom: 5.33vw;
}
.comment-info {
  display: flex;
  width: 100%;
  padding-left: 4vw;
  padding-right: 5.33vw;
  align-items: center;
  justify-content: space-between;
  position: relative;
}
.comment-headImg {
  width: 7.47vw;
  height: 7.47vw;
  border-radius: 50%;
}
.comment-name {
  font-size: 16px;
  position: absolute;
  left: 14.13vw;
}
.comment-like {
  font-size: 10px;
  color: rgb(153, 153, 153);
  &::after{
    content: '';
    background: url(/static/img/d_like.png);
    float: right;
    width: 12px;
    height: 13px;
    background-size: 12px 13px;
    margin-left: 4px;
  }
  &.like::after{
    content: '';
    background: url(/static/img/d_dlike2.png);
    background-size: 12px 13px;
  }
}
.comment-body {
  width: 100%;
  padding: 0 4vw 0 14.13vw;
  margin-top: 15px;
}
.comment-time {
  margin-top: 12px;
  font-size: 10px;
  color: rgb(51, 51, 51);
}
.comment-text {
  width: 100%;
  padding-right: 4vw;
  font-size: 14px;
}
.comment-reply {
  width: 100%;
  background-color: rgb(248, 248, 248);
  padding-top: 2.13vw;
  margin-top: 5.33vw;
  overflow: hidden;
}
.comment-reply-headImg {
  width: 5.87vw;
  height: 5.87vw;
  border-radius: 50%;
}
.comment-reply-name {
  font-size: 16px;
  position: absolute;
  left: 12.4vw;
  color: rgb(204, 204, 204);
}
.comment-reply-text {
  width: 100%;
  padding-left: 4vw;
  padding-right: 8.8vw;
  margin-bottom: 4vw;
  margin-top: 4vw;
  font-size: 14px;
}
.comment-reply-time{
  padding-left: 4vw;
  font-size: 10px;
  color: rgb(51, 51, 51);
  margin-bottom: 4vw;
}
.writeReview {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.33);
  z-index: 9;
}
.reviewContent {
  position: fixed;
  bottom: 0;
  width: 100%;
  padding: 4vw 4.8vw;
  background-color: rgb(242, 242, 242);
  label{
    font-size: 12px;
  }
}
.reviewInput {
  width: 100%;
  height: 20vw;
  border: none;
  padding: 3vw;
  font-size: 14px;
}
.submitReview {
  width: 17.33vw;
  height: 6.4vw;
  background-color: rgb(153, 153, 153);
  text-align: center;
  line-height: 6.4vw;
  border-radius: 4px;
  color: #fff;
  font-size: 14px;
  float: right;
  margin-top: 2px;
  &.black{
    background: #333;
  }
}
.footer {
  height: 50px;
  position: fixed;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  display: flex;
  box-shadow:0px -2px 2px 0px rgba(238,238,238,0.5);
}
.footer-like,
.footer-comment {
  display: flex;
  width: 17.87vw;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  font-size: 10px;
  color: rgb(51, 51, 51);
  position: relative;
}
.footer-like em{
  width: 19px;
  height: 19px;
  background: url(/static/img/d_dlike1.png);
  background-size: 19px 19px;
  margin-bottom: 3px;
}
.footer-like.like em{
  background: url(/static/img/d_dlike2.png);
  background-size: 19px 19px;
}
.footer-comment em{
  width: 18px;
  height: 18px;
  background: url(/static/img/d_comment.png);
  background-size: 18px 18px;
  margin-bottom: 4px;
}
.footer-comment::after {
  content: "";
  height: 30px;
  width: 1px;
  background-color: rgb(242, 242, 242);
  position: absolute;
  right: 0;
}
.footer-buttom {
  display: flex;
  flex: 1;
}
.footer-buy,
.footer-share {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.footer-share {
  background-color: rgb(51, 51, 51);
  color: #fff;
}
.footer-des {
  font-size: 16px;
  margin-bottom: 2px;
}
.footer-money {
  font-size: 10px;
}
.product{
  width: 89.33vw;
  height: 50.67vw;
  background: #fff;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
  margin: 0 auto 8vw;
  padding: 2.67vw;
  position: relative;
  .img{
    float: left;
    width: 45.33vw;
  }
  .text{
    float: left;
    padding-left: 3vw;
    width: 38vw;
    .price{
      font-size: 18px;
      margin-bottom: 1vw;
    }
    .market-price{
      font-size: 12px;
      color: #999;
      text-decoration: line-through;
      margin-bottom: 4vw;
    }
    .name{
      font-size: 16px;
      margin-bottom: 1vw;
    }
    .brand{
      font-size: 12px;
      color: #999;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  .tag{
    background: #ffce00;
    height: 5.87vw;
    line-height: 5.87vw;
    padding: 0 5vw;
    font-size: 14px;
    color: #fff;
    border-radius: 5.87vw 0 0 5.87vw;
    position: absolute;
    right: 0;
    bottom: 8vw;
    span{
      font-family: BASE_PRICE;
      font-size: 16px;
    }
  }
}
.shareTips{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 100;
  .tips{
    position: absolute;
    width: 54vw;
    height: 50vw;
    top: 12vw;
    right: 8vw;
  }
  .btn{
    width: 44.8vw;
    height: 16.53vw;
    position: absolute;
    top: 83vw;
    left: 27vw;
  }
}

#anonymous{
  display: none;
  
}
.anonymous{
  position: relative;
  margin-left: 20px;
  color: #666;
  &::before{
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border: 2px solid #666;
    position: absolute;
    left: -20px;
    top: 0;
    padding: 4px;
    border-radius: 50%;
  }
}

#anonymous:checked+.anonymous::before{
  background-color: #ffce00;
  border-color: rgba($color: #ffce00, $alpha: 0.5);
}

@media only screen and (device-width:375px) and (device-height:812px) {
  .footer {
    padding-bottom: 34px;
    box-sizing: content-box;
  }
}
</style>
